<template>
  <div class="day5">
    <div class="window"
      :style="{backgroundImage:`url(${imgList[now]})`}">
      <div class="blouse">
        <!-- blouse提供一个窗口透出 -->
        <div class="item"
          :class="{active:now==index}"
          v-for="(item,index) in imgList"
          :key="index"
          :style="`background-image:url(${item})`">
        </div>
      </div>
      <!-- ------------------------- -->
      <button class="arrow left-arrow"
        id="left"
        @click="switchPage(1)">
        <el-icon>
          <ArrowLeftBold />
        </el-icon>
      </button>
      <button class="arrow right-arrow"
        id="right"
        @click="switchPage(2)">
        <el-icon>
          <ArrowRightBold />
        </el-icon>
      </button>
    </div>
    <div class="tips">
      <div>1、想要漏出和的背景无缝衔接，注意 宽高/定位 都用vh vw</div>
      <div>2、background-position: center center;
        background-size: cover;搭配 动态调整时看着和谐</div>
      <div>3、vue3js部分导入图片用import 别用require//得到的是打包解析后的路径</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
// vue3这里用require会报错
import pic1 from '@/assets/1.jpg'
import pic2 from '@/assets/2.jpg'
import pic3 from '@/assets/3.jpg'
import pic4 from '@/assets/asuka.jpg'
const now = ref(0)
const imgList = ref([pic1, pic2, pic3, pic4])
function switchPage(val) {
  if (val == 1) {
    //左
    now.value > 0 ? now.value-- : (now.value = imgList.value.length - 1)
  } else {
    //右
    now.value < imgList.value.length - 1 ? now.value++ : (now.value = 0)
  }
}
</script>

<style lang="scss" scoped>
.day5 {
  width: 100vw;
  height: 100vh;

  .window {
    height: 100%; //宽高要设到它的外层，拉扯时背景图才能丝滑调整
    display: flex;
    // flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 0;
    //****注意这个配合cover*******/
    background-position: center center;
    background-size: cover;
    transition: 0.4s; //背景切换也会触发过渡

    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.7);
    }

    .blouse {
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
      height: 70vh; //blouse居中 距离顶部15vh
      width: 70vw; // 距离左边15vh
      position: relative;
      overflow: hidden;

      .item {
        opacity: 0;
        //******保证透出部分和背景一致 */
        height: 100vh;
        width: 100vw;
        background-position: center center;
        background-size: cover;
        //******* */
        position: absolute;
        top: -15vh;
        left: -15vw;
        transition: 0.4s ease;
        z-index: 2;

        &.active {
          opacity: 1;
        }
      }
    }
  }

  .arrow {
    position: fixed;
    background-color: transparent;
    color: #fff;
    padding: 20px;
    font-size: 30px;
    border: 2px solid orange;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
  }

  .left-arrow {
    left: calc(15vw - 65px);
  }

  .right-arrow {
    right: calc(15vw - 65px);
  }

  .tips {
    color: #fff;
  }
}
</style>